<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<div class="table-responsive">
	<!-- div class="container"--》div class="table-responsive"
		当页面缩放，显示不完全的时候，下面会有一个滚动条（响应式的效果） -->
	<!-- <table class="table-striped斑马线效果 table-bordered边框 table-hover鼠标悬停 table-condensed紧凑型"> -->
		<table class="table table-bordered">
			<!-- 创建表头 -->
			<thead>
				<tr class="active">
					<th>表格标题</th>
					<th>表格标题</th>
					<th>表格标题</th>
				</tr>
			</thead>
			<!-- 创建body内容 -->
			<tbody>
				<tr class="success">
					<td>表格单元格responsiveresponsive</td>
					<td>表格单元格responsiveresponsive</td>
					<td>表格单元格responsiveresponsive</td>
				</tr>
				<tr class="info">
					<td>表格单元格responsiveresponsive</td>
					<td>表格单元格responsiveresponsive</td>
					<td>表格单元格responsiveresponsive</td>
				</tr>
				<tr class="warning">
					<td>表格单元格responsiveresponsive</td>
					<td>表格单元格responsiveresponsive</td>
					<td>表格单元格responsiveresponsive</td>
				</tr>
				<tr class="danger">
					<td>表格单元格responsiveresponsive</td>
					<td>表格单元格responsiveresponsive</td>
					<td>表格单元格responsiveresponsive</td>
				</tr>
				<tr class="">
					<td>表格单元格responsiveresponsive</td>
					<td>表格单元格responsiveresponsive</td>
					<td>表格单元格responsiveresponsive</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>